<script setup>
import { useRoute } from 'vue-router'
import { getdetail } from '@/api/goodAPI'
import { onMounted, ref, watch } from 'vue'
import { useMouseInElement } from '@vueuse/core'
import side from './components/theSide.vue'
import { defineProps } from 'vue'
import { getSubCategoryAPI } from '@/api/goodAPI'
import sku from '@/components/theSku.vue'
defineProps({
  goodlist: {
    type: Array
  }
})
const sublist = ref([])
const route = useRoute()
const id = route.params.id
const detail = ref({})
const isactive = ref(0)
onMounted(async () => {
  const res = await getdetail(id)
  detail.value = res.data.result
  console.log(detail.value)
  const subres = await getSubCategoryAPI(data)
  sublist.value = subres.data.result.items
})
const target = ref(null)
const { elementX, elementY, isOutside } = useMouseInElement(target)
//监听elementX, elementY, isOutside
const coverX = ref(0)
const coverY = ref(0)
watch([elementX, elementY, isOutside], () => {
  if (elementX.value > 100 && elementX.value < 300) {
    coverX.value = elementX.value - 100
  } else if (elementX.value > 300) {
    coverX.value = 200
  }
  if (elementY.value > 100 && elementY.value < 300) {
    coverY.value = elementY.value - 100
  } else if (elementY.value > 300) {
    coverY.value = 200
  }
})
//无线滚动
const data = {
  categoryId: 1005000,
  page: 1,
  pageSize: 20,
  sortField: 'publishTime' | 'orderNum' | 'evaluateNum'
}
const disabled = ref(false)
const load = async () => {
  data.page++
  const res = await getSubCategoryAPI(data)
  sublist.value = sublist.value.concat(res.data.result.items)

  if (res.data.result.items.length === 0) {
    // eslint-disable-next-line no-undef
    ElMessage.warning('没有更多数据了')
    disabled.value = true
  }
}
</script>
<template>
  <div class="container" v-if="detail.mainPictures">
    <div class="Zimg" ref="target">
      <img
        alt=""
        style="width: 400px; height: 400px"
        :src="detail.mainPictures[isactive]"
      />
      <div
        class="cover"
        v-show="!isOutside"
        style="
          width: 200px;
          height: 200px;
          background-color: black;
          opacity: 0.3;
          position: absolute;
          z-index: 1;
          cursor: crosshair;
        "
        :style="{
          left: `${coverX}px`,
          top: `${coverY}px`
        }"
      ></div>
      <ul
        style="
          margin: 0 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        "
      >
        <li v-for="(ele, index) in detail?.mainPictures" :key="index">
          <img
            :src="ele"
            alt=""
            style="width: 65px; height: 65px; cursor: pointer"
            :class="{ activepic: isactive === index }"
            @click="isactive = index"
          />
        </li>
      </ul>
      <div
        class="Dimg"
        v-show="!isOutside"
        :style="{
          backgroundImage: `url(${detail.mainPictures[isactive]})`,
          backgroundPosition: `${-coverX * 2}px ${-coverY * 2}px`
        }"
      ></div>
    </div>
    <sku :detail="detail"></sku>
    <div class="side">
      <side :good="detail.hotByDay">
        <template #title> 热销商品 </template>
      </side>
      <side :good="detail.similarProducts">
        <template #title> 相似好物 </template>
      </side>
    </div>
  </div>
  <ul
    class="more container"
    v-if="detail.mainPictures"
    style="
      transform: translateY(-1200px);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    "
    v-infinite-scroll="load"
    :infinite-scroll-disabled="disabled"
  >
    <h2>图片懒加载指令 无限滚动</h2>
    <br />
    <li v-for="ele in sublist" :key="ele.id">
      <img :src="ele.picture" alt="" style="width: 200px" />
    </li>
  </ul>
</template>
<style lang="scss" scoped>
.container {
  display: flex;

  justify-content: space-between;
  margin-top: 50px;
  .Zimg {
    height: 400px;
    display: flex;
    position: relative;

    .Dimg {
      width: 400px;
      height: 400px;
      position: absolute;
      left: 485px;
    }
  }
}
</style>
